<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="funA()">innerText</button>
<button onclick="funB()">innerHtml</button>
<button onclick="funC()">innerText和innerHtml区别</button>
<button onclick="funD()">属性操作</button>
<button onclick="funE()">样式操作</button>
<button onclick="funF()">属性中Value操作</button>
<hr/>
<span id="s1">Hello,World!</span>
<span id="s2"><b>Hello,World!</b></span>
<input type="text" id="in1"/>
<a href="https://www.baidu.com" id="a1">百度</a>
<input type="text" id="in2" value="Hello,World!"/>
</body>
</html>
<script>
    function funA() {
        let s1 = document.getElementById("s1");
        // 获取到s1的文本内容
        let str = s1.innerText;
        console.log(str);
        // 重新设置s1的文本内容
        s1.innerText = '重新设置后的内容';
    }

    function funB() {
        let s1 = document.getElementById("s1");
        let childContent = s1.innerHTML;
        console.log(childContent);
        s1.innerHTML = '修改后的内容';
    }

    function funC() {
        let s2 = document.getElementById("s2");
        // 分别获取文本内容和子内容
        let textContent = s2.innerText;
        let childContent = s2.innerHTML;
        console.log(textContent);
        console.log(childContent);
        // s2.innerText = '<i>我是倾斜的</i>';
        s2.innerHTML = '<i>我是倾斜的</i>';
    }

    function funD() {
        let in1 = document.getElementById("in1");
        let a1 = document.getElementById("a1");
        // 获取属性
        let type = in1.type;
        let a1Href = a1.href;
        console.log(type);
        console.log(a1Href);
        // 设置属性
        in1.type = 'checkbox';
        a1.href = 'https://www.qq.com'
    }

    function funE() {
        let s1 = document.getElementById("s1");
        let s2 = document.getElementById("s2");
        // 获取样式
        let color = s1.style.color;
        let fontSize = s1.style.fontSize;
        console.log(color);
        console.log(fontSize);
        // 设置样式
        s1.style.color = 'red';
        s1.style.fontSize = '30px';
        s2.style.color = 'pink';
        s2.style.fontSize = '5em';
    }

    function funF() {
        let in2 = document.getElementById("in2");
        // 获取值
        let in2Val = in2.value;
        console.log(in2Val);
        // 设置值
        in2.value = 'Hello,China!';

    }
</script>